<template>
   
  <div class="mod-demo-echarts">
      <!--表单-->
      <el-form :inline="true" class="demo-form-inline"
      >•    <el-form-item label="开始日期">
            <el-date-picker
          v-model="beginTime"
          type="date"
          placeholder="选择要统计的开始日期"
          value-format="yyyy-MM-dd"
        />
           </el-form-item
      >
          <el-form-item label="结束日期">
            <el-date-picker
          v-model="endTime"
          type="date"
          placeholder="选择要统计的结束日期"
          value-format="yyyy-MM-dd"
        />
           </el-form-item
      >
         <el-button :disabled="btnDisabled" type="primary" @click="create()"
        >生成</el-button
      >
        </el-form
    >
      <el-row :gutter="20">
            <el-col :span="24">
            <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
              </el-card
        >
           </el-col
      >
           </el-row
    >
     
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      chartBar: null,
      beginTime: "",
      endTime: "",
      mapList: [],
      xData: [],
      yData: [],
      btnDisabled: false,
    };
  },
  mounted() {},
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白
    bug;
    if (this.chartBar) {
      this.chartBar.resize();
    }
  },
  methods: {
    create() {
      this.getDataList();
      this.initChartBar();
    }, // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/member/member/countAccountCreate"),
        method: "get",
        params: this.$http.adornParams({
          beginTime: this.beginTime,
          endTime: this.endTime,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.mapList = data.mapList;
          this.xData = [];
          this.yData = [];
          for (let j in this.mapList) {
            this.xData.push(this.mapList[j].NAME);
            this.yData.push(this.mapList[j].VALUE);
          }
          console.log(this.xData);
          console.log(this.yData);
          this.chartBar.resize(); // this.yData= this.mapList.map(obj => n.VALUE);
          // this.xData= this.mapList.map(obj => n.NAME);
          this.chartBar.setOption({
            xAxis: [
              {
                type: "category",
                data: this.xData,
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "每日注册用户数",
                type: "line",
                data: this.yData,
              },
            ],
          });
        } else {
          this.mapList = [];
        }
      });
    }, // 柱状图
    initChartBar() {
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["每日注册用户数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "每日注册用户数",
            type: "bar",
            data: this.yData,
          },
        ],
      };
      this.chartBar = echarts.init(document.getElementById("J_chartBarBox")); // this.chartBar.setOption(option)
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },
  },
};
</script>
<style lang="scss">
.mod-demo-echarts {
  .el-alert {
    margin-bottom: 10px;
  }
  .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>